<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../js/vue.js?v=11" type="text/javascript" charset="utf-8"></script>
    <!--demo.css是格式化CSS文件-->
    <link rel="stylesheet" href="../css/demo.css"/>
    <!--浮动菜单-->
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/newlist1.css?v=11"/>
    <!--<link rel="stylesheet" href="../css/ClickCarousel.css?v=11"/>-->
    <!--<script src="../js/ClickCarousel.js?V=11"></script>-->
</head>

<body>

<div id="index-ajax" >
    <div id="headerUp" class="top-title">
        <div class="header-left">
            <ul type="none" class="ulA">
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">推荐</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">热点</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">视频</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">推荐</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">热点</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">视频</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">推荐</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">热点</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">视频</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">推荐</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">热点</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">视频</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">军事</a>
                </li>
                <li class="liA">
                    <a href="#" class="aa" style="text-decoration: none;">更多</a>
                </li>

            </ul>
        </div>
        <div class="header-right">
            <ul type="none" class="ulB">
                <li style="display:inline" class="liB">
                    <a href="#" class="aa" style="text-decoration: none;">更多</a>
                </li>
                <li style="display:inline" class="liB">
                    <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
                </li>
                <li class="liB">
                    <a href="#" class="aa" style="text-decoration: none;">反馈</a>
                </li>
                <li style="display:inline" class="liB">
                    <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
                </li>
                <li class="liB">
                    <a href="#" class="aa" style="text-decoration: none;">图虫</a>
                </li>
                <li style="display:inline" class="liB">
                    <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
                </li>
                <li class="liB">
                    <a href="#" class="aa" style="text-decoration: none;">头条号</a>
                </li>
                <li style="display:inline" class="liB">
                    <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
                </li>
                <li class="liB">
                    <a href="#" class="aa" style="text-decoration: none;">问答</a>
                </li>
                <li style="display:inline" class="liB">
                    <hr style="border-right:0px solid #333333;height: 33px;Rgba(255,255,255,0.1) " ;>
                </li>
                <li class="liB"
                    style="margin-left: 10px;width: 60px;height: 34px;background-color:red;text-align: center">
                    <a href="#" class="aa" style="text-decoration: none;">登陆</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="box-shadow">
        <div class="headerdown-body">
            <div class="headerdownLeft">

                <img src="http://www.xmt.com/images/Logo/index.png" >
                <a class="he1" v-for="head in headerdown"  :href="head.url" >{{head.type}}<span>/</span></a>
                <a class="he3" href="" style="color: #666666">本页</a>
            </div>
            <div class="headerdownRight">
                <form class="form-wrapper cf">
                    <input type="text" placeholder="搜索最新资讯" required>
                    <button type="submit">Search</button>
                </form>
            </div>
        </div>
    </div>
    <div class="body">

        <div class="left">

            <!--<a href="hahhah" >-->
            <!--hahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh-->
            <!--</a>-->

        </div>

        <div class="centre"  v-for="new in newdata">

            <div id="banner"><!-- 轮播部分 -->
                <ul class="imgList"><!-- 图片部分 -->
                    <li><a href="#"><img src="./img/test1.jpg" width="400px" height="200px" alt="puss in boots1"></a></li>
                    <li><a href="#"><img src="./img/test2.jpg" width="400px" height="200px" alt="puss in boots2"></a></li>
                    <li><a href="#"><img src="./img/test3.jpg" width="400px" height="200px" alt="puss in boots3"></a></li>
                    <li><a href="#"><img src="./img/test4.jpg" width="400px" height="200px" alt="puss in boots4"></a></li>
                    <li><a href="#"><img src="./img/test5.jpg" width="400px" height="200px" alt="puss in boots5"></a></li>
                </ul>
                <img src="./img/prev.png" width="20px" height="40px" id="prev">
                <img src="./img/next.png" width="20px" height="40px" id="next">
                <div class="bg"></div> <!-- 图片底部背景层部分-->
                <ul class="infoList"><!-- 图片左下角文字信息部分 -->
                    <li class="infoOn">puss in boots1</li>
                    <li>puss in boots2</li>
                    <li>puss in boots3</li>
                    <li>puss in boots4</li>
                    <li>puss in boots5</li>
                </ul>
                <ul class="indexList"><!-- 图片右下角序号部分 -->
                    <li class="indexOn">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>




        <style type="text/css">
            body,div,ul,li,a,img{margin: 0;padding: 0;}
            ul,li{list-style: none;}
            a{text-decoration: none;}

            #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
            #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
            .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
            .imgList li{float:left;display: inline;}
            #prev,
            #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
            #prev{left: 10px;}
            #next{right: 10px;}
            #prev:hover,
            #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
            .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
            .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
            .infoList li{display: none;}
            .infoList .infoOn{display: inline;color: white;}
            .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
            .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
            .indexList .indexOn{background: red;font-weight: bold;color: white;}
        </style>















        </div>

        <div class="right">

        </div>
    </div>
</div>
</body>
</html>


<script>
    var demo = new Vue({
        el: "#index-ajax",
        data: {
            headerdown:[
                {url:"http://www.xmt.com/index.html", type:"首页"},
                {url:"http://www.xmt.com/index.html", type:"社会"},
            ],
            newdata:[
                {
                    title:"中国北方降雪今将基本结束 冷空气继续影响南方",
                    user: '中国新闻网 ',
                    time:"2017-02-22 00:32",
                    pic1:"http://www.xmt.com/images/NewList1/1.jpg",
                    pic2:"http://www.xmt.com/images/NewList1/2.jpg",
                    pic3:"",
                    content1:"'中新网北京2月22日电 连日来，中国经历了今年范围最大、强度最强的雨雪降温天气，其中出现降雪的国土面积达340万平方公里。"+
                    "根据预报，今日开始，北方降雪将基本结束，不过冷空气还将继续影响南方地区。" +
                    "中国天气网的直播显示，21日是雨雪范围最大、强度最强的一天，中国30个省份都出现雨雪。" +
                    "根据中央气象台官方网站21晚发布的消息，其中，出现降雪的国土面积达340万平方公里，是中国今年以来的最强降雪。在南方，重庆等多地则遭遇了今年以来最大降雨。" +
                    "伴随雨雪侵袭，多地气温也出现“断崖式”下跌，民众纷纷感叹“一夜入冬'。",
                    content2:"因实行高速管制，焦作沁阳站通行车辆寥寥。焦作高速交警队供图"+
                    "多地交通受阻"+
                    "连日来的雨雪天气也使得多地交通受阻。其中，遭遇暴雪袭击的新疆阿勒泰、塔城、伊犁、乌鲁木齐等地，多条道路封闭，民众交通出行严重受阻。乌鲁木齐机场36趟航班被迫取消。"+
                    "受雨雪天气影响，陕西境内部分高速公路收费站入口暂时封闭，多地客运线路一度停运。"+
                    "在河南，因降雪能见度低实行交通管制的高速路段达20多条，另因山西境内降雪严重，二广高速豫晋省界、南林高速豫晋省界—太行大峡谷、郑焦晋高速焦作西—豫晋省界向西禁上。"+
                    "据媒体21日报道，在北京，受降雪影响，从21日下午2点开始，首都机场出现大面积延误，延误比例达到23%。飞常准最新航班数据显示，当时全国12家机场因降雪被迫关闭。"+
                    "除了道路、民航等，铁路运输也受到影响。以兰州铁路局为例，受强冷空气影响，该局管内11趟列车出现不同程度晚点。",
                    content3:"因实行高速管制，焦作沁阳站通行车辆寥寥。焦作高速交警队供图"+
                    "多地交通受阻"+
                    "连日来的雨雪天气也使得多地交通受阻。其中，遭遇暴雪袭击的新疆阿勒泰、塔城、伊犁、乌鲁木齐等地，多条道路封闭，民众交通出行严重受阻。乌鲁木齐机场36趟航班被迫取消。"+
                    "受雨雪天气影响，陕西境内部分高速公路收费站入口暂时封闭，多地客运线路一度停运。"+
                    "在河南，因降雪能见度低实行交通管制的高速路段达20多条，另因山西境内降雪严重，二广高速豫晋省界、南林高速豫晋省界—太行大峡谷、郑焦晋高速焦作西—豫晋省界向西禁上。"+
                    "据媒体21日报道，在北京，受降雪影响，从21日下午2点开始，首都机场出现大面积延误，延误比例达到23%。飞常准最新航班数据显示，当时全国12家机场因降雪被迫关闭。"+
                    "除了道路、民航等，铁路运输也受到影响。以兰州铁路局为例，受强冷空气影响，该局管内11趟列车出现不同程度晚点。"


                }
            ]
        },


        ready: function () {
            //this.getdata()
            //this.getNew()
            //console.log(this.menu)
        },
        methods: {
            getdata: function () {
                console.log(this.index)
            },
            next: function () {
                //一下代码是自动刷新↓↓↓↓↓↓↓
                var data = this.news
                //console.log(data, 'before')
                //concat() 方法用于连接两个或多个数组。
                data = data.concat(data)
                //console.log(data, 'after')
                this.news = data
            },
        }
    })


    $(document).ready(function () {
        var range = 1550;             //距下边界长度/单位px
        var elemt = 500;           //插入元素高度/单位px
        var maxnum = 20;            //设置加载最多次数
        var num = 1;
        var totalheight = 0;
        var main = $("#index-ajax");                     //主体元素
        var timenum=0

        $(window).scroll(function () {
            var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)

            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
            //console.log(" $(window).scrollTop()")
            console.log("页面的文档高度 ：" + $(document).height());
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
            //浏览器的高度-距下边界长度<=0且1不等于20
            if (($(document).height() - range) <= totalheight && num != maxnum) {
                demo.next()
            }
        })
    })

</script>






